<template>
    <div class="index">
        <!-- 模块1：轮播图 -->
        <template>
            <Carousel v-model="value" autoplay :autoplay-speed="3000">
                <!-- <Carousel v-model="value"> -->
                <CarouselItem>
                    <div class="demo-carousel">
                    <div class="carousel carouselOne">
                        <!-- <img :src="banner" alt="" class="banner"> -->
                        <!-- <div class="bannerText">
                        <h1 class="bannerTitle animated bounceInRight">签署合同就是这么简单！</h1>
                        <p class="bannerExp animated bounceInLeft">即时、安全地发送你最重要的文件。甚至在任何地方都可以签名。<br>快速响应提高你的效率。</p>
                        <input type="button" value="免费注册" class="bannerRgister animated bounceInDown"> -->
                        <div class="bannerText">
                        <h1 class="bannerTitle">签署合同就是这么简单！</h1>
                        <p class="bannerExp">即时、安全地发送你最重要的文件。甚至在任何地方都可以签名。<br>快速响应提高你的效率。</p>
                        <Button class="bannerRgister" @click.native="registerfns">免费注册</Button>
                        </div>
                    </div>
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <div class="carousel carouselTwo"></div>
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="demo-carousel">
                        <div class="carousel carouselThree"></div>
                    </div>
                </CarouselItem>
            </Carousel>
        </template>
        <!-- 模块2：让签约更安全 , 更快捷 -->
        <div class="safe w1190">
            <h2 class="commonTitle">让签约更安全 , 更快捷</h2>
            <template>
                <Row>
                    <i-col span="" class="safeIcon">
                        <div class="iconBg text-center">
                            <i class="iconfont icon-web iconImg"></i>
                        </div>
                        <p class="iconText">支持电脑网页，手机网页，微信，APP随时签约，查阅合同，高效协同。</p>
                    </i-col>
                    <i-col span="" class="safeIcon">
                        <div class="iconBg text-center">
                            <i class="iconfont icon-data iconImg"></i>
                            </div>
                        <p class="iconText">领先的信息运维机制严守数据安全；数据传输军用级别加密防止信息泄露。</p>
                    </i-col>
                    <i-col span="" class="safeIcon">
                        <div class="iconBg text-center">
                            <i class="iconfont icon-api iconImg"></i>
                        </div>
                        <p class="iconText">标准API接入，完美兼容系统，五孚签平台在线签署，满足个性化需求。</p>
                    </i-col>
                    <i-col span="" class="safeIcon">
                        <div class="iconBg text-center">
                            <i class="iconfont icon-law iconImg"></i>
                        </div>
                        <p class="iconText">严格遵守《电子签名法》相关规定，平台电子合同法律效力获得仲裁/司法机构认同。</p>
                    </i-col>
                </Row>
            </template>
        </div>
        <!-- 模块3：丰富的行业应用场景 -->
        <div class="scene">
            <div class="w1190">
                <h2 class="commonTitle">丰富的行业应用场景</h2>
                <ul class="clearfix">
                <li class="secneList" v-for="(item,index) in sceneSorts" :key="index">
                    <div class="bannerOuter">
                        <img :src="item.img" alt="" class="banner">
                        <div class="shade"></div>
                    </div>
                    <h3>{{item.title}}</h3>
                </li>
                </ul>
            </div>
        </div>
        <!-- 模块4：我们的客户 -->
        <div class="customer">
            <div class="w1190" style="position: relative;">
                <h2 class="commonTitle">我们的客户</h2>
                <div class="carousel text-center">
                <template>
                   <swiper :options="swiperOption" ref="mySwiper">
                       <swiper-slide  v-for="(items,index) in swiper" :key="index"><img :src="items.bank" alt=""></swiper-slide>
                  </swiper>
                </template>
                  <div class="swiper-button-prev" slot="button-prev"><i class="iconfont icon-arrow_l"></i></div>
                  <div class="swiper-button-next" slot="button-next"><i class="iconfont icon-arrow_r"></i></div>
                </div>

            </div>
        </div>
    </div>
</template>
<style>
@import "../../assets/css/animate.min.css";
</style>
<script>
// 新增加swiper：
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      //模块1：轮播图
      value: 0,
      //模块3：图片
      sceneSorts: [
        {
          img: require("../../assets/img/index/lingshou.png"),
          title: "零售"
        },
        {
          img: require("../../assets/img/index/jinrong.png"),
          title: "金融"
        },
        {
          img: require("../../assets/img/index/yiliao.png"),
          title: "医疗"
        },
        {
          img: require("../../assets/img/index/baoxian.png"),
          title: "保险"
        }
      ],
      //模块4：图片
      swiper: [
        { bank: require("../../assets/img/index/bank1.jpg") },
        { bank: require("../../assets/img/index/bank2.jpg") },
        { bank: require("../../assets/img/index/bank3.jpg") },
        { bank: require("../../assets/img/index/bank4.jpg") },
        { bank: require("../../assets/img/index/bank5.jpg") },
        { bank: require("../../assets/img/index/bank2.jpg") },
        { bank: require("../../assets/img/index/bank3.jpg") },
        { bank: require("../../assets/img/index/bank4.jpg") },
        { bank: require("../../assets/img/index/bank5.jpg") }
      ],
      //我们的客户轮播图配置
      swiperOption: {
        loop: true,
        autoplay: 2000,
        initialSlide: 0,
        slidesPerView: 5,
        spaceBetween: 20,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        autoplayDisableOnInteraction: false
        // observer: true,
        // observeParents: true
      }
    };
  },
  methods: {
    registerfns() {
      let ths = this;
      ths.$router.push("/register");
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/css/swiper.css";
</style>

<style lang="less">
.demo-carousel {
  background: #506b9e;
  height: 500px;
}
.index {
  //模块1：轮播图
  .ivu-carousel {
    .ivu-carousel-arrow.left {
      left: 10px !important;
      background: transparent;
      font-size: 26px;
      opacity: 0.5;
      &:hover {
        opacity: 1;
      }
    }
    .ivu-carousel-arrow.right {
      right: 10px !important;
      background: transparent;
      font-size: 26px;
      opacity: 0.5;
      &:hover {
        opacity: 1;
      }
    }
  }
  .ivu-carousel-dots-inside {
    bottom: 30px;
  }
  .ivu-carousel-dots li {
    &.ivu-carousel-active {
      button {
        background: #eb3437;
        opacity: 1;
      }
    }
    button {
      width: 38px;
      height: 8px;
      background: #cbcbcb;
      opacity: 0.5;
    }
  }

  .carousel {
    position: relative;
    height: 100%;
    .banner {
      width: 100%;
    }
    .bannerText {
      position: absolute;
      top: 140px;
      left: 50%;
      margin-left: -595px;
      color: #ffffff;
      .bannerTitle {
        font-size: 3rem !important;
        line-height: 34px;
        font-weight: 400px;
      }
      .bannerExp {
        font-size: 2rem;
        line-height: 26px;
        margin: 50px 0;
      }
      .bannerRgister {
        width: 180px;
        height: 60px;
        font-size: 2rem;
        color: #ffffff;
        border-radius: 5px;
        background: #e65054;
        cursor: pointer;
        border: none;
        &:hover {
          border: none;
        }
      }
    }
  }
  .carouselOne {
    background: url("../../assets/img/index/banner.png") center center;
  }
  .carouselTwo {
    background: url("../../assets/img/product/productBanner.png") center center;
  }
  .carouselThree {
    background: url("../../assets/img/about/aboutBanner.png") center center;
  }
  //模块2：让签约更安全 , 更快捷
  .safe {
    padding: 60px 0 52px 0;
    .ivu-row {
      padding-top: 60px;
      overflow: hidden;
      .safeIcon {
        height: 200px;
        width: 297.5px;
        padding: 0 20px;
        float: left;
        .iconBg {
          width: 120px;
          height: 120px;
          margin: 0 auto 29px auto;
          background: #f1575b;
          border-radius: 50%;
          line-height: 130px;
          transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -ms-transition: all 0.5s;
          .iconImg {
            margin: 0 auto;
            font-size: 100px;
            line-height: 120px;
            color: #fff;
          }
          &:hover {
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 10px 10px #e8e8e8;
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            -o-transform: translateY(-10px);
            transform: translateY(-10px);

            .iconImg {
              color: #f1575b;
            }
          }
        }
        .iconText {
          font-size: 1.4rem;
          color: #3a3a3a;
          line-height: 16px;
        }
        &:nth-child(3) {
          .iconImg {
            font-size: 120px;
          }
        }
      }
    }
  }
  //模块3：丰富的行业应用场景
  .scene {
    background: #e9eaeb;
    padding: 60px 0 50px 0;
    overflow: hidden;
    .secneList {
      margin: 60px 74px 0 0;
      float: left;
      &:last-child {
        margin-right: 0;
      }
      .bannerOuter {
        width: 242px;
        height: 162px;
        overflow: hidden;
        position: relative;
        .shade {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #434445;
          opacity: 0.5;
          transition: all 1s ease;
          transition-delay: 0s;
          transition-duration: 0.3s;
          transition-property: opacity;
          transition-timing-function: ease-in;
          z-index: 200;
        }
        img {
          border: 1px solid #eeeeee;
          transition: all 1s ease;
          cursor: pointer;
          transition-delay: 0s;
          transition-duration: 1s;
          transition-property: all;
          transition-timing-function: ease;
          z-index: 1;
        }
        &:hover {
          img {
            transform: scale(1.2, 1.2);
          }
        }
      }
      h3 {
        font-size: 2rem;
        color: #3a3a3a;
        line-height: 22px;
        margin-top: 20px;
      }
    }
  }
  //模块4：我们的客户
  .customer {
    padding: 60px 0 52px 0;
    // 新增加swiper：
    .swiper-slide {
      img {
        width: 175px;
        margin: auto;
      }
    }
    .swiper-button-prev {
      left: -25px;
      text-align: center;
      line-height: 44px;
      background: none;
      i {
        font-size: 40px;
        &:hover {
          color: #e8272b;
        }
      }
    }
    .swiper-button-next {
      right: -10px;
      text-align: center;
      line-height: 44px;
      background: none;
      i {
        font-size: 40px;
        &:hover {
          color: #e8272b;
        }
      }
    }
    .carousel {
      margin-top: 60px;
      position: relative;
    }
  }
}
</style>


